<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="menu">
        <title>Configuration, methods and events of Kendo UI Menu</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="How to configure all animations in Menu UI widget, enable and disable, remove specified items and use code examples for all methods and events supported.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/menu.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/menu.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouimenu"><a href="#kendouimenu">kendo.ui.Menu</a></h1>

<p>Represents the Kendo UI Menu widget. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-animation">
<a href="#configuration-animation">animation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>A collection of <strong>Animation</strong> objects, used to change default animations. A value of <code>false</code> will disable all animations in the widget.</p>

<p><code>animation:true</code> is not a valid configuration.</p>

<p>Available animations for the <strong>Menu</strong> are listed below.  Each animation has a reverse options which is used for the <strong>close</strong> effect by default, but can be over-ridden
by setting the <strong>close</strong> animation.  Each animation also has a direction which can be set off the animation (i.e. <strong>slideIn:Down</strong>).</p>

<h4><em>slideIn</em></h4>

<p>Menu content slides in from the top</p>

<h4><em>fadeIn</em></h4>

<p>Menu content fades in</p>

<h4><em>expand</em></h4>

<p>Menu content expands from the top down. Similar to slideIn.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        animation: { open: { effects: "fadeIn" } }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close">
<a href="#configuration-animation.close">animation.close </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation that will be used when closing sub menus.</p>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        animation: { close: { effects: "slideIn:up" } }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close.effects">
<a href="#configuration-animation.close.effects">animation.close.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Effect to be used for closing of the popup.</p>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        animation: { close: { effects: "slideIn:up" } }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close.duration">
<a href="#configuration-animation.close.duration">animation.close.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>Defines the animation duration in milliseconds.</p>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
         animation: { open: {
             effects: "slideIn:down",
             duration: 100
         } }
     });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open">
<a href="#configuration-animation.open">animation.open </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation that will be used when opening sub menus.</p>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        animation: { open: { effects: "slideIn:down" } }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open.effects">
<a href="#configuration-animation.open.effects">animation.open.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Effect to be used for opening of the popup.</p>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        animation: { open: { effects: "slideIn:down" } }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open.duration">
<a href="#configuration-animation.open.duration">animation.open.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>Defines the animation duration in milliseconds.</p>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        animation: { open: {
            effects: "zoomIn",
            duration: 100
        } }
     });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-closeOnClick">
<a href="#configuration-closeOnClick">closeOnClick </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Specifies that sub menus should close after item selection (provided they won't navigate).</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        closeOnClick: false
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataSource">
<a href="#configuration-dataSource">dataSource </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The data source of the widget which is used to render its items. Can be a JSON object/Array that contains an item or an Array of items to be rendered.
Refer to the example below for a list of the supported properties.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;&lt;/ul&gt;
&lt;script&gt;
  var imgUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png";
  $(document).ready(function() {
    $("#menu").kendoMenu({
      dataSource:
      [{
        text: "Item 1",
        cssClass: "myClass",                         // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
        url: "http://www.kendoui.com",               // Link URL if navigation is needed, optional.
        attr: {
          custom: 'value',                            // Add attributes with specified values
          other: 'value'
        }
      },
       {
         text: "&lt;b&gt;Item 2&lt;/b&gt;",
         encoded: false,                              // Allows use of HTML for item text
         content: "text",                              // content within an item
         contentAttr: {
           style: 'border: 1px solid red; padding: 2px;', // Add attributes to the content container
           custom: 'value'
         }
       },
       {
         text: "Item 3",
         imageAttr: {                                                                   // Add additional image attributes
           alt: 'Image',
           height: '25px',
           width: '25px'
         },
         imageUrl: imgUrl,                            // Item image URL, optional.
         items: [{                                    // Sub item collection
           text: "Sub Item 1"
         },
                 {
                   text: "Sub Item 2"
                 }]
       },
       {
         text: "Item 4",
         spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
       },
       {
         text: "Item 5",
         select: function(e) {                        // Item select event handler, optional
            // e.sender - returns reference to the Kendo Menu widget
            // e.target - returns the clicked element. Typically, the span.k-link element.

            // handle event
         }
       }]
    })
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-direction">
<a href="#configuration-direction">direction </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "default")</em>
</h3>

<p>Specifies Menu opening direction. Can be "top", "bottom", "left", "right".
You can also specify different direction for root and sub menu items, separating them with space. The example below will initialize the root menu to open upwards and
its sub menus to the left.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        direction: "top left"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-hoverDelay">
<a href="#configuration-hoverDelay">hoverDelay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 100)</em>
</h3>

<p>Specifies the delay in ms before the menu is opened/closed - used to avoid accidental closure on leaving.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        hoverDelay: 200
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-openOnClick">
<a href="#configuration-openOnClick">openOnClick </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: false)</em>
</h3>

<p>Specifies that the root sub menus will be opened on item click.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        openOnClick: true
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-openOnClick.rootMenuItems">
<a href="#configuration-openOnClick.rootMenuItems">openOnClick.rootMenuItems </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Specifies that the root menus will be opened only on item click.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        openOnClick: {
            rootMenuItems: true
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-openOnClick.subMenuItems">
<a href="#configuration-openOnClick.subMenuItems">openOnClick.subMenuItems </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Specifies that the sub menus will be opened only on item click.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2
                &lt;ul&gt;
                    &lt;li&gt;Sub Item 2.1&lt;/li&gt;
                    &lt;li&gt;Sub Item 2.2&lt;/li&gt;
                    &lt;li&gt;Sub Item 2.3&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2
                &lt;ul&gt;
                    &lt;li&gt;Sub Item 2.1&lt;/li&gt;
                    &lt;li&gt;Sub Item 2.2&lt;/li&gt;
                    &lt;li&gt;Sub Item 2.3&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        openOnClick: {
            subMenuItems: true
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-orientation">
<a href="#configuration-orientation">orientation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "horizontal")</em>
</h3>

<p>Root menu orientation. Could be horizontal or vertical.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        orientation: "vertical"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-popupCollision">
<a href="#configuration-popupCollision">popupCollision </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Specifies how Menu should adjust to screen boundaries. By default the strategy is <strong>"fit"</strong> for a sub menu with a horizontal parent,
meaning it will move to fit in screen boundaries in all directions, and <strong>"fit flip"</strong> for a sub menu with vertical parent, meaning it will fit vertically and flip over
its parent horizontally. You can also switch off the screen boundary detection completely if you set the <strong>popupCollision</strong> to false.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu({
        popupCollision: false
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-scrollable">
<a href="#configuration-scrollable">scrollable </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>If enabled, the Menu displays buttons that scroll the items when they cannot fit the width or the popups' height of the Menu. By default, scrolling is disabled.</p>

<p>The following example demonstrates how to enable the scrolling functionality.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu" style="width:150px;"&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#menu").kendoMenu({
        scrollable: true
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-scrollable.distance">
<a href="#configuration-scrollable.distance">scrollable.distance </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 50)</em>
</h3>

<p>Sets the scroll amount (in pixels) that the Menu scrolls when the scroll buttons are hovered. Each such distance is animated and then another animation starts with the same distance. If clicking a scroll button, the Menu scrolls with 2x the distance.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu" style="width:150px;"&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#menu").kendoMenu({
        scrollable: {
            distance: 20
        }
    });
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-append"><a href="#methods-append">append</a></h3>

<p>Appends an item to a <strong>Menu</strong> in the specified referenceItem's sub menu.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;&lt;/ul&gt;
&lt;script&gt;
    //initialize the menu widget
    $("#menu").kendoMenu()
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");

    menu.append([
        {
            text: "Item 1",
            cssClass: "myClass",                         // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
            url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
        },
        {
            text: "&lt;b&gt;Item 2&lt;/b&gt;",
            encoded: false,                              // Allows use of HTML for item text
            content: "text"                              // content within an item
        },
        {
            text: "Item 3",
            items: [{text: "Sub Item 1"},{text: "Sub Item 2"}] //Sub items
        },
        {
            text: "Item 4",
            spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
        }
    ]);
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>item <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>Item to be appended, specified as a JSON object. An array of objects can also be passed.</p>

<h5>referenceItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> <em>(optional)</em>
</h5>

<p>A reference item to append the new item in. If omitted, the new item will be appended to the as a root item.</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h3 id="methods-close"><a href="#methods-close">close</a></h3>

<p>Closes a sub-menu of a specified item(s) in a <strong>Menu</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li id="Item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    //intialize the menu widget
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");

    // close the sub menu of "Item1"
    menu.close("#Item1");
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>Target item selector.</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the <strong>Menu</strong> for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p><strong>Important:</strong> This method does not remove the Menu element from DOM.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    var menu = $("#menu").data("kendoMenu");

    // detach events
    menu.destroy();
&lt;/script&gt;
</code></pre>

<h3 id="methods-enable"><a href="#methods-enable">enable</a></h3>

<p>Enables or disables an item of a <strong>Menu</strong>. This can optionally be accomplished on
initialization by setting the <strong>disabled="disabled"</strong> on the desired menu item html element.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li id="secondItem"&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // disable the li menu item with the id "secondItem"
    menu.enable("#secondItem", false);
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>Target element</p>

<h5>enable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>Desired state</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h3 id="methods-insertAfter"><a href="#methods-insertAfter">insertAfter</a></h3>

<p>Inserts an item into a <strong>Menu</strong> after the specified referenceItem.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    //
    menu.insertAfter(
        [{
            text: "Item 1",
            url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
        },
        {
            text: "&lt;b&gt;Item 2&lt;/b&gt;",
            encoded: false,                                 // Allows use of HTML for item text
            content: "text"                                 // content within an item
        },
        {
            text: "Item 3",
            items: [{                                    // Sub item collection
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 4",
            spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
        }],
        "li:last-child"
    );
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>item <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>Target item, specified as a JSON object. Can also handle an array of such objects.</p>

<h5>referenceItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>A reference item to insert the new item after.</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h3 id="methods-insertBefore"><a href="#methods-insertBefore">insertBefore</a></h3>

<p>Inserts an item into a <strong>Menu</strong> before the specified referenceItem.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    //
    menu.insertBefore(
        [{
            text: "Item 1",
            url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
        },
        {
            text: "&lt;b&gt;Item 2&lt;/b&gt;",
            encoded: false,                                 // Allows use of HTML for item text
            content: "text"                                 // content within an item
        },
        {
            text: "Item 3",
            imageUrl: "http://www.telerik.com/test.jpg", // Item image URL, optional.
            items: [{                                    // Sub item collection
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 4",
            spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
        }],
        "li:first-child"
    );
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>item <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>Target item, specified as a JSON object. Can also handle an array of such objects.</p>

<h5>referenceItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>A reference item to insert the new item before</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h3 id="methods-open"><a href="#methods-open">open</a></h3>

<p>Opens a sub-menu of a specified item(s) in a <strong>Menu</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li id="Item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // open the sub menu of "Item1"
    menu.open("#Item1");
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>Target item selector.</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h3 id="methods-remove"><a href="#methods-remove">remove</a></h3>

<p>Removes a specified item(s) from a <strong>Menu</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li id="Item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // remove the item with the id "Item1"
    menu.remove("#Item1");
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>Target item selector.</p>

<h4>Returns</h4>

<p><code>kendo.ui.Menu</code> Returns the Menu object to support chaining.</p>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-close"><a href="#events-close">close</a></h3>

<p>Fires before a sub menu gets closed. You can cancel this event to prevent closure.</p>

<h4>Event Data</h4>

<h5>e.item <code>HTMLElement</code>
</h5>

<p>The closed item</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
     $("#menu").kendoMenu({
         close: function(e) {
             // handle event
         }
     });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // bind to the close event
    menu.bind("close", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-open"><a href="#events-open">open</a></h3>

<p>Fires before a sub menu gets opened. You can cancel this event to prevent opening the sub menu.</p>

<h4>Event Data</h4>

<h5>e.item <code>HTMLElement</code>
</h5>

<p>The opened item</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
     $("#menu").kendoMenu({
         open: function(e) {
             // handle event
         }
     });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // bind to the open event
    menu.bind("open", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-activate"><a href="#events-activate">activate</a></h3>

<p>Fires when a sub menu gets opened and its animation finished.</p>

<h4>Event Data</h4>

<h5>e.item <code>HTMLElement</code>
</h5>

<p>The activated item</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
     $("#menu").kendoMenu({
         activate: function(e) {
             // handle event
         }
     });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // bind to the activate event
    menu.bind("activate", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-deactivate"><a href="#events-deactivate">deactivate</a></h3>

<p>Fires when a sub menu gets closed and its animation finished.</p>

<h4>Event Data</h4>

<h5>e.item <code>HTMLElement</code>
</h5>

<p>The deactivated item</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
     $("#menu").kendoMenu({
         deactivate: function(e) {
             // handle event
         }
     });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // bind to the deactivate event
    menu.bind("deactivate", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-select"><a href="#events-select">select</a></h3>

<p>Fires when a menu item gets selected.</p>

<h4>Event Data</h4>

<h5>e.item <code>HTMLElement</code>
</h5>

<p>The selected item</p>

<h4>Example</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
     $("#menu").kendoMenu({
         select: function(e) {
             // handle event
         }
     });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");
    // bind to the select event
    menu.bind("select", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

